<template>
  <div>{{count}}</div>
  <button @click="add">state加加</button>
  <button @click="add1">readonlyState加加</button>
</template>

<script>
import { reactive, toRefs ,readonly} from "vue";
export default {
  name: "只读数据 readonly",
  // 定义模板
  components: {},
  //在创建组件之前执行
  setup(props, context) {
    const state = reactive({
      count: 0,
    });
    //readonly只读属性
    const readonlyState = readonly(state)
    const add = ()=>{ //可以修改
      state.count++;
    }
    const add1 = ()=>{//不可以修改
      readonlyState.count++;
    }
    return {
      ...toRefs(readonlyState),
      add,
      add1
    };
  },
};
</script>
<style scoped lang ='less'>
</style>